window.onload = init();


function init() {
    authenticate();
    var hrefs = location.href.split("/");
    var id = hrefs.pop();
    var type = hrefs.pop();
    if (type === "question") {
        fillingQuestion(id);
        fillingRecommendQuestions();
        fillingComments();
        fillingHotTopic("questions",6);
    }
}

function appendQuestion(data) {
    $(".questionContent").text(data.content);
    $(".title_").text(data.title);
    $(".publishTime").text(data.createdAt);

    dealWithTagAndTags(data.tags);
    $(".author").text(data.user.username);
    $(".readCount").text(data.readCount);
    $(".commentCount").text(data.commentCount);
    $(function () {
        editormd.markdownToHTML("show-view", {});
    })
}

function fillingQuestion(id) {
    $.ajax({
        url: "/question/" + id,
        dataType: "json",
        contentType: "application/json;charset=utf-8",
        type: "POST",
        success: function (response) {
            appendQuestion(response.data);
        },
        error: function (request) {
            console.log(request);
        }
    });
}

function dealWithTagAndTags(data) {
    tags = data.split(",");
    $(".tag").text(tags[0]);
    $(".tags").empty();
    for (var i = 0; i < tags.length; i++) {
        var info = "<a href=\"#\" rel=\"tag\">" + tags[i] + "</a>";
        $(".tags").append(info);
    }
}

function fillingRecommendQuestions() {
    $.ajax({
        url: "/recommend/questions/" + 5,
        dataType: "json",
        contentType: "application/json;charset=utf-8",
        type: "GET",
        success: function (response) {
            appendRecommendedQuestions(response.data);
        },
        error: function (request) {
            console.log(request);
        }
    });
}

function appendRecommendedQuestions(data) {
    $(".recommend").empty();
    for (var i = 0; i < data.length; i++) {
        var info = "<li><a href=\"" + "/question/" + data[i].id + "\" title=\"\">" + data[i].title + "</a></li>\n";
        $(".recommend").append(info);
    }

}

function replyQuestion() {
    var id = window.location.href.split("/").pop();
    var content = $("#comment-textarea").val();
    if (!isNaN(parseInt(id)) && content.trim() !== "") {
        $(".comment-prompt").css({"display": "block"});
        reply(1, id, content);
    }
}

function reply(type, parentId, content) {
    $.ajax({
        url: "/comment",
        type: "POST",
        data: JSON.stringify({
            "type": type,
            "parentId": parentId,
            "content": content
        }),
        dataType: "json",
        contentType: "application/json;charset=utf-8",
        success: function (response) {
            if (type === 1) {
                $(".comment-prompt").empty();
                var info = " <p class='text-success'><span>评论成功！</span></p>     ";
                $(".comment-prompt").append(info);
                fillingComments();
            } else {
                dealCommentsToComment(parentId);
            }
        },
        error: function (request) {
            console.log(request);
        }
    });
}

function fillingComments() {
    $.ajax({
        url: window.location.pathname + "/comments",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "GET",
        success: function (response) {
            console.log(response.data);
            appendComments(response);

        },
        error: function (request) {
            console.log(request);
        }
    });
}

function appendComments(response) {
    $(".commentlist").empty();
    for (var i = 0; i < response.data.length; i++) {
        var info = "    <div class=\"media\" >\n" +
            "        <div class=\"media-left\">\n" +
            "            <a href=\"#\">\n" +
            "                <img  style=\"width: 64px\" class=\"media-object img-circle\" src=\"" +
            response.data[i].user.avatar_url +
            "\" alt=\"...\">\n" +
            "<span>" +
            response.data[i].user.username +
            "</span>" +
            "            </a>\n" +
            "        </div>\n" +
            "        <div class=\"media-body\">\n" +
            "            <p>" +
            response.data[i].content +
            "</p>\n" +
            "            <p>\n" +
            "                <span class=\"icon glyphicon glyphicon-thumbs-up\" onclick='praiseComment(this)' data-commentId='" +
            response.data[i].id +
            "'>" +
            response.data[i].praiseCount +
            "</span>\n" +
            "                <span class=\"icon glyphicon glyphicon-comment\" onclick='collapseComment(this)' data-commentid='" +
            response.data[i].id +
            "'>" +
            response.data[i].commentCount +
            "</span>\n" +
            "                <span class=\"pull-right glyphicon glyphicon-time\" >" +
            response.data[i].createdAt +
            "</span>\n" +
            "            </p>" +

            "    <div class=\"col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse\" id='" +
            "commentId-" + response.data[i].id +
            "'>\n" +
            "<div class='" +
            "commentToComments-" + response.data[i].id +
            "'>\n" +
            "                                    <!--                            此处要js循环放入后台数据-->\n" +
            "</div>\n" +
            "          <input type=\"text\" class=\"form-control\" placeholder=\"评论一下\">\n" +
            "<p class='tip-comment pull-left'></p>" +
            "          <button type=\"button\" class=\"btn btn-success pull-right\" style=\"margin:10px;\"\n onclick=\"replyComment(this)\">评论\n </button>\n" +
            "     </div>" +
            "\n" +
            "        </div>\n" +
            "    </div>\n";
        $(".commentlist").append(info);
    }

}

function collapseComment(e) {
    var id = "commentId-" + e.getAttribute("data-commentId");
    if ($("#" + id).hasClass("in")) {
        $("#" + id).removeClass("in");
        e.classList.remove("secondLevelCommentActive");
        // $(".commentToComments-"+e.getAttribute("data-commentId")).empty();
    } else {
        $("#" + id).addClass("in");
        e.classList.add("secondLevelCommentActive");
        dealCommentsToComment(e.getAttribute("data-commentId"));
    }
}

function praiseComment(e) {
    var commentId = e.getAttribute("data-commentid");
    $.ajax({
        url: "/praiseComment/" + commentId,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        success: function (response) {
            console.log(response);
        },
        error: function (request) {
            console.log(request);
        }
    });
    fillingComments();
}

function dealCommentsToComment(parentId) {
    $.ajax({
        url: "/question/comment/comments/" + parentId,
        type: "GET",
        dataType: "json",
        contentType: "application/json;charset=utf-8",
        success: function (response) {
            $(".commentToComments-" + parentId).empty();
            for (var i = 0; i < response.data.length; i++) {
                var info = "<div class=\"media\">\n" +
                    "    <div class=\"media-left media-middle\">\n" +
                    "        <a href=\"#\">\n" +
                    "            <img class=\"media-object img-rounded\" style='height: 64px;' src=\"" +
                    response.data[i].user.avatar_url +
                    "\" alt=\"...\">\n" +
                    "<span>" +
                    response.data[i].user.username +
                    "</span>" +
                    "        </a>\n" +
                    "    </div>\n" +
                    "    <div class=\"media-body\">\n" +
                    response.data[i].content +
                    "    </div>\n" +
                    "</div>";
                $(".commentToComments-" + parentId).append(info);
            }

        },
        error: function (request) {
            console.log(request);
        }
    });

}

function replyComment(e) {
    var parentId = e.parentElement.getAttribute("id").split("-").pop();
    var content = e.previousElementSibling.previousElementSibling.value;
    reply(2, parentId, content);
    var info="<span class='text-success'>回复成功！</span>";
    $(".tip-comment").append(info);
}

